<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My grades</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/association.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/grade.css') }}">
</head>

<body>
    <div class="ass" onclick="hideSemesterFn()">
        <div class="ass-con">
            <div class="ass-header">
                <div class="ass-left">
                    <div>
                        <span class="ass-logo">logo</span>
                        <span class="ass-school">{{ school }}</span>
                    </div>
                    <div class="ass-center">
                        <p class="ass-pic-c">
                            <img src="{{ url_for('get_avatar', filename=user.avatar) }}" alt="">
                        </p>
                        <div>
                            <p class="ass-hi">Hi, {{ user.name }}</p>
                            <p class="ass-1">welcome to {{ school }}, keep good work</p>
                        </div>
                    </div>
                </div>
                <div class="ass-right">
                    <input class="ass-input" type="text" placeholder="search">
                    <a href="{{ url_for('auth.login') }}">
                        <button class="sign-in-btn">Sign Out</button>
                    </a>
                </div>
            </div>
            <div class="ass-contents">
                <div class="ass-content">
                    <div class="grade-left">

                        <div class="find-teacher-header">
                            <div class="aaa">
                                <p onclick="showSemesterFn(this,event)">
                                    <span class="semes">
                                        First semester
                                    </span>
                                    <span class="grade-time-tips">March 21, 2021—July 1, 2021 <svg class="down"
                                            viewBox="0 0 32 32" width="100%" height="100%">
                                            <path
                                                d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                            </path>
                                        </svg>
                                    </span>
                                </p>
                                <div class="semester-con">
                                    <p onclick="selectSemesterFn(0,event)">
                                        <span>First semester</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                    <p onclick="selectSemesterFn(1,event)">
                                        <span>Second semester</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                    <p onclick="selectSemesterFn(2,event)">
                                        <span>Third semester</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                </div>
                            </div>
                            <div class="language-cons">
                                <p class="search-header">
                                    <span>search</span>
                                    <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                        <path
                                            d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                        </path>
                                    </svg>
                                </p>
                                <div class="language">
                                    <p class="active">
                                        <span>search con</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                    <p>
                                        <span>search cons</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="grade-lists">
                            {% for timetable in timetables %}
                                <div class="grade-list">
                                    <p class="grade-text">
                                        <img src="{{ url_for('static', filename='img/005.svg') }}" alt="">
                                        {{ timetable.title }}
                                    </p>
                                    <p class="grade-tip">{{ randrange(60, 100) }}</p>
                                    <p class="grade-tip">{{ randrange(60, 100) }}%</p>
                                    <p class="grade-pass">
                                        pass
                                        <img src="{{ url_for('static', filename='img/006.svg') }}" alt="">
                                    </p>
                                    <img class="grade-003" src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                    <div class="grade-con">
                                        <div class="grade-con-list">
                                            <p class="grade-con-exam">examination item</p>
                                            <p class="grade-con-score">score</p>
                                            <p class="grade-con-tip">proportion</p>
                                            <p class="grade-con-dui"></p>
                                        </div>
                                        <div class="grade-con-list">
                                            <p class="grade-con-exam">assessment of stage 1</p>
                                            <p class="grade-con-score">32</p>
                                            <p class="grade-con-tip">10%</p>
                                            <p class="grade-con-dui">
                                                <img src="{{ url_for('static', filename='img/006.svg') }}" alt="">
                                            </p>
                                        </div>
                                        <div class="grade-con-list">
                                            <p class="grade-con-exam">group homework </p>
                                            <p class="grade-con-score">45</p>
                                            <p class="grade-con-tip">20%</p>
                                            <p class="grade-con-dui">
                                                <img src="{{ url_for('static', filename='img/006.svg') }}" alt="">
                                            </p>
                                        </div>
                                        <div class="grade-con-list">
                                            <p class="grade-con-exam">thesis 3</p>
                                            <p class="grade-con-score">32</p>
                                            <p class="grade-con-tip">60%</p>
                                            <p class="grade-con-dui">
                                                <img src="{{ url_for('static', filename='img/006.svg') }}" alt="">
                                            </p>
                                        </div>
                                        <div class="grade-con-list">
                                            <p class="grade-con-exam">assessment of stage 4</p>
                                            <p class="grade-con-score">32</p>
                                            <p class="grade-con-tip">10%</p>
                                            <p class="grade-con-dui">
                                                <img src="{{ url_for('static', filename='img/006.svg') }}" alt="">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="grade-right">
                        <p class="grade-right-titles">Ongoing course</p>
                        <div class="grade-right-lists">
                            {% for course in courses %}
                                <a class="grade-right-list grade-purple" href="/course/lesson/{{ course.id }}">
                                    <span class="grade-right-circle"></span>
                                    <div>
                                        <p class="grade-right-title">
                                            {{ course.name }}
                                        </p>
                                        <p class="grade-right-tip">
                                            March 21, 2021—July 1, 2021
                                        </p>
                                        <p>
                                            <span class="grade-right-time">schedule {{ course.progress }}/{{ course.lessons }}</span>
                                        </p>
                                        <p class="grade-right-line">
                                            <span class="grade-right-active"></span>
                                        </p>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="ass-side">
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.course') }}">
                                <span class="ass-icon"></span>
                                my course
                            </a>
                        </li>
                        <li  class="no-open">
                            <span class="ass-icon"></span>
                            my task
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            notification
                        </li>
                        <li>
                            <a href="{{ url_for('student.timetable') }}">
                                <span class="ass-icon"></span>
                                timetable
                            </a>
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li class="active">
                            <a href="{{ url_for('student.grade') }}"></a>
                                <span class="ass-icon"></span>
                                grades
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            homework
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.social') }}">
                                <span class="ass-icon"></span>
                                Social
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            Societies
                        </li>
                    </ul>
                    <div class="ass-workplace">
                        <p>workplace</p>
                        <button>
                            <span>forum</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                        <button>
                            <span>My upload</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script>
        function showSemesterFn(obj, event) {
            stopP(event)
            $(".semester-con").addClass("show");
        }

        function stopP(e) {
            var evt = e || window.event;
            evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
        }

        function hideSemesterFn() {
            $(".semester-con").removeClass("show")
        }

        function selectSemesterFn(num, event) {
            stopP(event)
            for (var i = -1; i < 2; i++) {
                $(".semester-con p").eq(i).removeClass("active")
            }
            $(".semester-con p").eq(num).addClass("active")
            $(".semes").text($(".semester-con p").eq(num).text())
        }
    </script>
</body>

</html>